<template>
	<view>
		<!-- 打印机列表 -->
		<view v-if="list.length > 0">
			<view class="printer-item" v-for="(item, index) in list" :key="index">
				<text>打印机编码：{{ item.printerCode }}</text>
				<text>检验码：{{ item.checkCode }}</text>
				<text>创建时间：{{ formatDate(item.creationTime) }}</text>
				<text>备注：{{ item.remark }}</text>
			</view>
		</view>

		<!-- 如果没有 list，显示一个空的提示 -->
		<u-empty v-if="list.length === 0" marginTop="100" mode="favor" icon="../../../../static/images/list.png"
			text="暂无打印机" width="320" height="320" textSize="24"></u-empty>

		<!-- 添加打印机按钮 -->
		<view class="add-button">
			<u-button type="success" color="#06A972" size="large" text="新增打印机" @click="goToAddPrinter"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getPrinterList
	} from '@/api/printer.js';

	export default {
		data() {
			return {
				list: [], // 打印机列表
			};
		},
		computed: {
			...mapGetters(["isLogin", "uid", "userType"]),
		},
		methods: {
			// 格式化时间为北京时间
			formatDate(dateString) {
				if (!dateString) return '';
				const date = new Date(dateString);
				const options = {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',	
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit',
					timeZone: 'Asia/Shanghai',
					hour12: false,
				};
				return new Intl.DateTimeFormat('zh-CN', options).format(date);
			},
			// 调用接口获取打印机列表
			getPrinterList() {
				getPrinterList({
					userInfoId: this.uid
				}).then(res => {
					this.list = res.value || [];
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				});
			},
			// 跳转到新增打印机页面
			goToAddPrinter() {
				uni.navigateTo({
					url: '/pages/printer/printer_add/index'
				});
			},
		},
		created() {
			// 页面加载时调用方法获取数据
			this.getPrinterList();
		},
	};
</script>

<style>
	.printer-item {
		padding: 10px;
		margin-bottom: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	text {
		display: block;
		margin-bottom: 5px;
	}

	.add-button {
		margin-top: 20px;
		display: flex;
		justify-content: center;
	}
</style>